<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<!--
	自己实现分页控件
-->
<!DOCTYPE html>
<html>
<head>
	<base href="<%=basePath%>">
<meta charset="UTF-8">

<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>

<script type="text/javascript">
	var gPageNum=0;
	var gPageSize=2;
	var gTotalNum=0;
	$(function(){
		$(".time").datetimepicker({
			minView:"month",
			language:"zh-CN",
			format:"yyyy-mm-dd",
			autoclose:true,
			todayBtn:true,
			pickerPosition:"bottom-left"
		})

		$("#btn_addActivity").click(function () {
			//点击创建市场活动按钮处理
			$.ajax({
				url:'settings/user/getUserList.do',
				type:'get',
				dataType:'json',
				success:function (data) {
					var html="";
					$.each(data,function (index,element) {
						html+='<option value="'+element.id+'">'+element.name+'</option>';
					})
					var owner = $("#create-marketActivityOwner");
					owner.empty();
					owner.append(html);
					owner.val("${user.id}");
				}
			});
			$("#createActivityModal").modal('show');
		})

		$("#create-save").click(function () {
			$("#create-save").attr("disable",true);
			//点击保存市场活动按钮处理
			$.ajax({
				url:'workbench/activity/save.do',
				type:'post',
				dataType:'json',
				data:{
					owner:$("#create-marketActivityOwner").val(),
					name:$.trim($("#create-marketActivityName").val()),
					startDate:$("#create-startTime").val(),
					endDate:$("#create-endTime").val(),
					cost:$.trim($("#create-cost").val()),
					description:$.trim($("#create-describe").val())
				},
				success:function (data) {
					if(data.success){
						//刷新列表
						refreshList();
						$("#createActivityModal").modal('hide');
					}else{
						alert("保存失败请重试");
					}
				}
			});
			$("#create-save").attr("disable",false);
		})

		$(".setPageSize").click(function () {
			var oldPageSize = gPageSize;
			getPage(0,parseInt(this.innerHTML));
			this.innerHTML=oldPageSize;
		})
		refreshList();
	});

	//刷新列表控件
	function refreshPageNumCtrlList() {
		var obj = $("#pageNumCtrlList");
		obj.empty();
		var html = '';
		var totalPage = getTotalPage();

		if(gPageNum==0){
			html+='<li class="disabled"><a href="javascript:void(0)" class="setPageNum">首页</a></li>';
			html+='<li class="disabled"><a href="javascript:void(0)" class="setPageNum">上一页</a></li>';
		}else{
			html+='<li><a href="javascript:void(0)" class="setPageNum">首页</a></li>';
			html+='<li><a href="javascript:void(0)" class="setPageNum">上一页</a></li>';
		}

		for(var i=0;i<totalPage;i++){
			var pageNum = i+1;
			if(i==gPageNum){
				html+='<li class="active"><a href="javascript:void(0)">'+pageNum+'</a></li>';
			}else{
				html+='<li><a  href="javascript:void(0)" class="setPageNum">'+pageNum+'</a></li>';
			}
		}
		if(gPageNum==getTotalPage()-1){
			html+='<li class="disabled"><a href="javascript:void(0)" class="setPageNum" class="setPageNum">下一页</a></li>';
			html+='<li class="disabled"><a href="javascript:void(0)" class="setPageNum">末页</a></li>'
		}else{
			html+='<li><a href="javascript:void(0)" class="setPageNum" class="setPageNum">下一页</a></li>';
			html+='<li><a href="javascript:void(0)" class="setPageNum">末页</a></li>'
		}

		obj.append(html);

		$(".setPageNum").click(function () {
			var obj = $(this);
			var setPageNum = getSetPageNum(obj);
			getPage(setPageNum,gPageSize);
		})
	}
	//获取总页数
	function getTotalPage() {
		var totalPage = Math.ceil(gTotalNum/gPageSize);
		return totalPage;
	}
	//从页面获取设置的页面数值
	function getSetPageNum(obj) {
		var setPageNum = 0;
		var text = obj.text();

		if(!isNaN(parseInt(text))){
			setPageNum = parseInt(text);
			return setPageNum-1;
		}
		var totalPage = getTotalPage();

		if(text=="下一页"){
			setPageNum = gPageNum+1;
		}else if((text=="上一页")){
			setPageNum = gPageNum-1;
		}else if((text=="首页")){
			setPageNum = 0;
		}else if((text=="末页")){
			setPageNum = totalPage-1;
		}else {
			setPageNum = 0;
		}
		return setPageNum;
	}
	//刷新列表
	function refreshList() {
		getPage(gPageNum,gPageSize);
		getGlobal();
	}
	//获取全局数据目前仅为全部数量
	function getGlobal() {

		$.ajax({
			url:'workbench/activity/getGlobal.do',
			type:'get',
			dataType:'json',
			success:function (data) {
				setGlobal(data)
			}
		});
	}
	//设置全局数据
	function setGlobal(data) {
		$("#totalNum").text(data.totalNum);
		gTotalNum = data.totalNum;
		refreshPageNumCtrlList();
	}
	//获取一页的内容
	function getPage(pageNum,pageSize) {
		$.ajax({
			url:'workbench/activity/getPage.do',
			type:'get',
			dataType:'json',
			data:{
				'pageNum':pageNum,
				'pageSize':pageSize
			},
			success:function (data) {
				setPage(pageNum,pageSize,data);
				refreshPageNumCtrlList();
			}
		});
	}
	//设置一页的内容
	function setPage(pageNum,pageSize,data) {
		$("#t_activity").empty();
		var html = '';
		$.each(data,function (index,element) {
			html+='<tr>';
			html+='<td>'+'<input type="checkbox" value="'+element.id+'"/>'+'</td>';
			html+='<td>'+element.name+'</td>';
			html+='<td>'+element.startDate+'</td>';
			html+='<td>'+element.endDate+'</td>';
			html+='</tr>';
		})
		$("#t_activity").append(html);
		$("#btn_pageSize").empty();
		$("#btn_pageSize").append(pageSize +'&nbsp;<span class="caret"></span>');
		gPageNum = pageNum;
		gPageSize = pageSize;
	}

</script>
</head>
<body>

	<!-- 创建市场活动的模态窗口 -->
	<div class="modal fade" id="createActivityModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel1">创建市场活动</h4>
				</div>
				<div class="modal-body">
				
					<form class="form-horizontal" role="form">
					
						<div class="form-group">
							<label for="create-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="create-marketActivityOwner">
								  <option>zhangsan</option>
								  <option>lisi</option>
								  <option>wangwu</option>
								</select>
							</div>
                            <label for="create-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="create-marketActivityName">
                            </div>
						</div>
						
						<div class="form-group">
							<label for="create-startTime" class="col-sm-2 control-label">开始日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control time" id="create-startTime">
							</div>
							<label for="create-endTime" class="col-sm-2 control-label">结束日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control time" id="create-endTime">
							</div>
						</div>
                        <div class="form-group">

                            <label for="create-cost" class="col-sm-2 control-label">成本</label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="create-cost">
                            </div>
                        </div>
						<div class="form-group">
							<label for="create-describe" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="create-describe"></textarea>
							</div>
						</div>
						
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="create-save">保存</button>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 修改市场活动的模态窗口 -->
	<div class="modal fade" id="editActivityModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel2">修改市场活动</h4>
				</div>
				<div class="modal-body">
				
					<form class="form-horizontal" role="form">
					
						<div class="form-group">
							<label for="edit-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="edit-marketActivityOwner">
								  <option>zhangsan</option>
								  <option>lisi</option>
								  <option>wangwu</option>
								</select>
							</div>
                            <label for="edit-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="edit-marketActivityName" value="发传单">
                            </div>
						</div>

						<div class="form-group">
							<label for="edit-startTime" class="col-sm-2 control-label">开始日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control time" id="edit-startTime" value="2020-10-10">
							</div>
							<label for="edit-endTime" class="col-sm-2 control-label">结束日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control time" id="edit-endTime" value="2020-10-20">
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-cost" class="col-sm-2 control-label">成本</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-cost" value="5,000">
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-describe" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="edit-describe">市场活动Marketing，是指品牌主办或参与的展览会议与公关市场活动，包括自行主办的各类研讨会、客户交流会、演示会、新产品发布会、体验会、答谢会、年会和出席参加并布展或演讲的展览会、研讨会、行业交流会、颁奖典礼等</textarea>
							</div>
						</div>
						
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" data-dismiss="modal">更新</button>
				</div>
			</div>
		</div>
	</div>
	
	
	
	
	<div>
		<div style="position: relative; left: 10px; top: -10px;">
			<div class="page-header">
				<h3>市场活动列表</h3>
			</div>
		</div>
	</div>
	<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
		<div style="width: 100%; position: absolute;top: 5px; left: 10px;">
		
			<div class="btn-toolbar" role="toolbar" style="height: 80px;">
				<form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">名称</div>
				      <input class="form-control" type="text">
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">所有者</div>
				      <input class="form-control" type="text">
				    </div>
				  </div>


				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">开始日期</div>
					  <input class="form-control time" type="text" id="startTime" />
				    </div>
				  </div>
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">结束日期</div>
					  <input class="form-control time" type="text" id="endTime">
				    </div>
				  </div>
				  
				  <button type="submit" class="btn btn-default">查询</button>
				  
				</form>
			</div>
			<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
				<div class="btn-group" style="position: relative; top: 18%;">
				  <button type="button" class="btn btn-primary" id="btn_addActivity"><span class="glyphicon glyphicon-plus"></span> 创建</button>
				  <button type="button" class="btn btn-default" id="btn_updateActivity"><span class="glyphicon glyphicon-pencil"></span> 修改</button>
				  <button type="button" class="btn btn-danger" id="btn_deleteActivity"><span class="glyphicon glyphicon-minus"></span> 删除</button>
				</div>
				
			</div>
			<div style="position: relative;top: 10px;">
				<table class="table table-hover" id="t_activity">
					<thead>
						<tr style="color: #B3B3B3;">
							<td><input type="checkbox" /></td>
							<td>名称</td>
                            <td>所有者</td>
							<td>开始日期</td>
							<td>结束日期</td>
						</tr>
					</thead>
					<tbody>
						<tr class="active">
							<td><input type="checkbox" /></td>
							<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.jsp';">发传单</a></td>
                            <td>zhangsan</td>
							<td>2020-10-10</td>
							<td>2020-10-20</td>
						</tr>
                        <tr class="active">
                            <td><input type="checkbox" /></td>
                            <td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.jsp';">发传单</a></td>
                            <td>zhangsan</td>
                            <td>2020-10-10</td>
                            <td>2020-10-20</td>
                        </tr>
					</tbody>
				</table>
			</div>
			
			<div style="height: 50px; position: relative;top: 30px;">
				<div>
					<button type="button" class="btn btn-default" style="cursor: default;">共<b id="totalNum">50</b>条记录</button>
				</div>
				<div class="btn-group" style="position: relative;top: -34px; left: 110px;">
					<button type="button" class="btn btn-default" style="cursor: default;">显示</button>
					<div class="btn-group">
						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="btn_pageSize">
							10
							<span class="caret"></span>
						</button>
						<ul class="dropdown-menu" role="menu">
							<li><a href="javascript:void(0)" class="setPageSize">3</a></li>
							<li><a href="javascript:void(0)" class="setPageSize">5</a></li>
						</ul>
					</div>
					<button type="button" class="btn btn-default" style="cursor: default;">条/页</button>
				</div>
				<div style="position: relative;top: -88px; left: 285px;">
					<nav>
						<ul class="pagination" id="pageNumCtrlList">
							<li class="disabled"><a href="javascript:void(0)">首页</a></li>
							<li class="disabled"><a href="javascript:void(0)">上一页</a></li>
							<li class="active"><a href="javascript:void(0)">1</a></li>
							<li><a href="javascript:void(0)" class="setPageNum">2</a></li>
							<li><a href="javascript:void(0)" class="setPageNum">3</a></li>
							<li><a href="javascript:void(0)" class="setPageNum">4</a></li>
							<li><a href="javascript:void(0)" class="setPageNum">5</a></li>
							<li><a href="javascript:void(0)" class="setPageNum">下一页</a></li>
							<li class="disabled"><a href="#">末页</a></li>
						</ul>
					</nav>
				</div>
			</div>
			
		</div>
		
	</div>
</body>
</html>